<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="box">
        <div id="content" title="标题">这里是测试内容</div>
        <p
          style="
            color: aqua;
            background-color: rgb(184, 215, 216);
            font-size: 30px;
          "
        >
          sjfksdafjsag
        </p>
      </div>
    </div>
    <script>
      /*节点的名称（nodeName）
    节点类型    nodeName   
    元素节点的  标签名相同 
    属性节点的  属性名相同 
    文本节点的  #text      
    文档节点的  #document  */
      //标签
      console.log(document.getElementById("content").nodeName); //DIV
      //属性
      console.log(
        document.getElementById("content").getAttributeNode("title").nodeName
      ); //title
      //文本节点
      console.log(document.getElementById("content").childNodes[0].nodeName); //#text
      //文档节点
      console.log(document.nodeName); //#documnt

      /*节点的值（nodeValue）
    节点类型    nodeValue
    元素节点    是undefined或null 
    文本节点    文本本身          
    属性节点    属性值     */
      //元素节点
      console.log(document.getElementById("content").nodeValue);
      //文本节点
      console.log(document.getElementById("content").childNodes[0].nodeValue);
      //属性节点
      console.log(
        document.getElementById("content").getAttributeNode("title").nodeValue
      );
      console.log(
        document.getElementsByTagName("p")[0].getAttributeNode("style")
          .nodeValue
      );

      /*节点的类型（nodeType）
       元素类型  nodeType 
         元素       1     
         属性       2     
         文本       3     
         注释       8     
         文档       9     
            */
      //元素节点
      console.log(document.getElementById("content").nodeType); //1
      //属性节点
      console.log(
        document.getElementById("content").getAttributeNode("title").nodeType //2
      );
      //文本节点
      console.log(document.getElementById("content").childNodes[0].nodeType); //3
      //文档节点
      console.log(document.nodeType);//9
    </script>
  </body>
</html>
